<template>
	<div id="gbye">
		<div class="ssk">
			<div class="zzip">
				<i class="iconfont icon-sousuo"></i>
				<input type="text" name="" v-model="zzh" v-on:input="ssjy" @keyup.enter="bbj" @click="cinput"/>
				<label for="" class="hol" :class="{holn:flags}">搜索歌曲、歌手、专辑</label>
				<i class="iconfont icon-cuowu" @click="rimu"></i>
			</div>
				
		</div>
		<div >
			<!--<p class="tisi" :class="{nonets:flaga}" v-for="(q,i) in artist" :key="i" @click="tj(q.name)">{{q.name}}</p>-->
			<p class="tisi" :class="{nonets:flaga}" v-for="(w,i) in song" :key="i" @click="tj(w.name)">{{w.name}}</p>
		</div>
		<div class="rmss" :class="{rmssn:flags}">
			热门搜索
		</div>
		<div class="sskk" :class="{noned:flag}">
			<span :class="{bqn:flags}" v-for="(e,i) in firs" :key="i" @click="tj(e.first)">
				{{e.first}}
			</span>
		</div>
		<div class="lb" v-for="(r,i) in seek" :key="i" @click="tobf(r.id)">
			<p>{{r.name}}</p>	
			<span v-for="(s,i) in r.artistsa">{{s.name}}</span>--<span>{{r.album.name}}</span>
			<div class="icon" >
     			  <i class="iconfont icon-bofang" ></i>
     		</div>
		</div>
	</div>
	
</template>

<script>
	import axios from "axios";
	//输出
	export default{
	created(){
		var that = this;
		axios.get("http://netease.bluej.cn/search/hot"
		).then(function(res) {
			console.log(res);
			that.firs = res.data.result.hots
		})
	},

methods: {
	ssjy(){
		if(this.zzh!==""){
			var that = this ;
		axios.get("http://netease.bluej.cn/search/suggest?keywords=" + this.zzh
		).then(function(res) {
			console.log(res);
//			that.artist = res.data.result.artists;
			that.song = res.data.result.songs;
//			console.log(res.data.result.artists);
//			console.log(res.data.result.songs);
		  });
		}
	},
	cinput(){
		this.flags=true;
		this.flaga=false;
	},
	rimu(){
		this.flags=false;
		this.zzh="";
		this.seek="";
		this.artist="";
		this.song="";
	},
	tj(nem){
		var that=this;
		axios.get("http://netease.bluej.cn/search?keywords==" + nem
		).then(function(res) {
			console.log(res);
			that.seek=res.data.result.songs;
			that.artistsa=res.data.result.songs.artists;
		})
		that.flags=true;
		that.zzh=nem;
		that.flaga=true;
	},
	bbj() {
		var that=this;
		axios.get("http://netease.bluej.cn/search?keywords==" + this.zzh
		).then(function(res) {
			console.log(res);
			that.seek=res.data.result.songs;
			that.artistsa=res.data.result.songs.artists;
		});
		this.flaga=true;
//		 if(this.flag==false){
// 			this.flag=true;
// 		}
	},
	tobf(bfId){
      this.$router.push( { path:"/bofang",query:{bfid : bfId} } );
   		}
},	
data(){
		return{
			zzh:"",
			seek:"",
			firs:"",
			flag:false,
			flags:false,
			flaga:false,
			song:"",
			artist:"",
			artistsa:""
		}
	}
}
</script>

<style lang="scss">
	#bye{
		.mint-swipe{
			height: 46vw;
		}
		img{
			width: 100%;
		}
	}
	body{
		background: #FBFCFD;
	}
	#gbye{
		
	.ssk{
		position: relative;
		padding: 15px 10px;
		background: #FBFCFD;
		.zzip{
			/*border: 1px solid black;*/
			width: 95%;
			border-radius: 15px;
			background: #f3f3f3;
		}
		.icon-sousuo{
			position: absolute;
			left: 3px;
			top: 13px;
			margin: 0 8px;
			color: #c9c9c9;
			vertical-align: middle;
			font-size: 30px;
		}
			input{
				width: 90%;
				height: 30px;
				margin-left: 30px;
				line-height: 18px;
				background: #f3f3f3;
				border-radius: 15px;
				border: 0px;
				font-size: 16px;
				color: black;
			}
		.hol{
			position: absolute;
			left: 45px;
			top: 20px;
			font-size: 17px;
			color: #c9c9c9;
			background: #f3f3f3;
			pointer-events: none;
		}
		.holn{
			display: none;
		}
		.icon-cuowu{
			position: absolute;
			right: 32px;
			top: 16px;
			color: #C9C9C9;
			width: 30px;
			height: 30px;
			font-size: 23px;
			line-height: 28px;
			text-align: center;
		}
	}
	.rmss{
		padding: 10px 10px;
		border-top: 1px solid #f3f3f3 ;
	}
	.rmssn{
		display: none;
	}
	.sskk{
		width: 100%;
		span{
		padding: 5px;
		display: inline-block;
		border: 2px solid #f1f1f1;
		border-radius: 15px;
		margin: 5px 10px;	
		}
		.bqn{
			display: none;
		}
	}
	.noned{
		display: none;
	}
	.lb{
		padding: 10px;
		/*background: #f8f8f8;*/
		border-bottom: 1px solid #EEEFF0;
		.icon{
					display: inline-block;
					position: absolute;
					right: 20px;
					margin-top: -15px;
				}
				.icon-bofang{
						font-size: 25px;
						opacity :0.4
					}
	}
	.tisi{
		padding: 10px 10px;
		border-bottom: 1px solid #EEEFF0;
	}
	.nonets{
		display: none;
	}
}
	
</style>